<template>
	<div v-transfer-dom>
      <popup position="right" class="sidemenu" v-model="show" width="80%">
      	<div class="sidemenu-title">
      		<div class="fs-bigger">{{$title}}</div>
      		<div class="sidemenu-weather" @click="$router.push('/weather');$store.commit('openSidemenu', false)" v-if="weather">
	      		<div>{{weather.temp}}°</div>
	      		<div class="fs-smaller">
	      			<p>{{weather.city}}</p>
	      			<p>{{weather.weather}}</p>
	      		</div>
      		</div>
      	</div>
        <ul>
        	<li v-for="item in menu" :title="item.name" @click="$router.push(item.link);$store.commit('openSidemenu', false)">{{item.name}}</li>
        </ul>
        <div class="popup-close"><x-icon type="ios-close-empty" size="60" @click="$store.commit('openSidemenu', false)"></x-icon></div>
      </popup>
    </div>
</template>
<script>
import { TransferDom, Popup, Group, Cell, CellBox } from 'vux'

export default {
	name: 'nav',
	data () {
	  	return {
	  		city: '',
	  		defaultCity: '北京',
	  		show: false,
	  		menu: [
				{
					name: '今日快讯',
					link: '/news'
				},
				{
					name: '滁宁百科',
					link: ''
				},
				{
					name: '景点大全',
					link: '/spots'
				},
				{
					name: '出行交通',
					link: ''
				},
				{
					name: '医疗服务',
					link: ''
				},
				{
					name: '汽车大全',
					link: ''
				},
				{
					name: '个人中心',
					link: '/setting'
				}
			]
	  	}
	},
	watch: {
		show (value) {
			this.$store.commit('openSidemenu', value)
		},
		show2 (value){
			this.show = value
		},
		city (value) {
			this.$getData.weather({ city: value }, (response) => {
				if(response.status == 200 && response.data){
					this.$store.commit('weather', response.data.result)
				}else{
					console.log("天气获取失败")
				}
			}, () => {
				console.log("天气获取失败")
			})
		}
	},
	computed: {
		show2 () {
			return this.$store.state.sidemenuShow
		},
		weather () {
			return this.$store.state.weather
		}
	},
	directives: { TransferDom },
	components: { Popup, Group, Cell, CellBox },
	methods: {
		getLocation () {
			if(navigator.geolocation){
				navigator.geolocation.getCurrentPosition((position) => {
					let lnglatXY = [position.coords.longitude, position.coords.latitude]
					AMap.service('AMap.Geocoder', () => {
					    let geocoder = new AMap.Geocoder();
					    geocoder.getAddress(lnglatXY, (status, result) => {
						    if (status === 'complete' && result.info === 'OK') {
						       this.city = result.regeocode.addressComponent.city
						    }else{
						       this.city = this.defaultCity
						    }
						    this.$store.commit('setLocation', this.city)
						})
					})
				}, () => {
					this.city = this.defaultCity
					console.log('自动获取位置失败')
				})
			}else{
				this.city = this.defaultCity
				this.$toast.show('自动获取位置失败')
			}
		}
	},
	mounted () {
		this.getLocation()
	}
}
</script>

<style>
div.sidemenu{text-align: center;background:#fff;}
.sidemenu-title{padding: 1rem .8rem;background: #e22f0c;color: #fff;box-shadow: 0 0 10px #aaa;font-weight: 100;display: flex;align-items: center;}
.sidemenu-title>div:first-child{flex: 1;text-align: left;}
.sidemenu-weather{display: flex;}
.sidemenu-weather div:first-child{font-size: 32px;margin-right: .5rem;}
.sidemenu-weather div:last-child{text-align: right;line-height: 16px;}
.sidemenu ul{border-top: 1px solid #c82d0e;}
.sidemenu li{padding: .9rem 15px;border-bottom: 1px solid #efefef;}
.sidemenu li:active{background: #ed4b2b;color: #fff;}
.popup-close{padding: 1rem 0;position: absolute;left: 0;right: 0;bottom: 1rem;}
.popup-close .vux-x-icon {fill: #e22f0c;}
</style>